<template>
  <div>
    <el-form class="viewForm" label-width="80px">
      <el-col :span="22">
        <el-form-item label="模板代码">
          <div v-html="viewModel.id"></div>
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item label="模板名称">
          <div v-html="viewModel.name"></div>
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item label="模板内容">
          <scCodeEditor v-model="viewModel.content" name="content" mode="sql" style="width: 100%;height: auto">
          </scCodeEditor>
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item label="模板类型">
          <div v-html="viewModel.type"></div>
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item label="模板描述">
          <div v-html="viewModel.note"></div>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script setup>
import {defineAsyncComponent} from "vue";

const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor/index.vue'));

import {useShow} from "@/utils/useShow";

const {goBack, viewModel} = useShow("/queryTemplate/view")
</script>

<style scoped>

</style>